<!DOCTYPE html>
<html>
 <head>
  <title>乐器</title>
  <link rel="shortcut icon" href="../images/logo.jpg" type="image/x-icon" />
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
  <link rel="stylesheet" type="text/css" href="../dist/css/bootstrap.css" />
  <link rel="stylesheet" type="text/css" href="../css/game.css" />
  <script src="../js/jquery-3.1.0.min.js" type="text/javascript"></script>
  <script src="../dist/js/bootstrap.js" type="text/javascript"></script>
  <script src="../js/game.js" type="text/javascript"></script>
 </head>
 <body>
 <!-- 加载 -->
  <div class="loading">
     <span>音乐正在加载，请稍等。。。</span>
    <div class="progress">
         <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">0%</div>
    </div>
  </div>
  <div class="container-fluid">
   <!-- 曲谱 -->
   <div class="tune">
    <div class="melody1"></div>
    <div class="melody2"></div>
    <button class="btn btn-primary stop"><p>演出</p><p>结束</p></button>
    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
     <div class="panel">
      <div class="panel-heading" role="tab" id="headingOne">
       <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 大地 </a> </h4>
      </div>
      <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
       <div class="panel-body">
        <div class="thumbnail earth">
         <img src="../images/beyond/beyond1.jpg" />
         <div class="caption">
          <h3>大地</h3>
          <button class="btn btn-primary play"><span style="display: none;">../images/beyond/beyond1(1).png</span><span>演奏</span><span style="display: none;">../images/beyond/beyond1(2).png</span></button>
          <button class="btn btn-primary playmore" id="playmore1">更多</button>
         </div>
        </div>
       </div>
      </div>
     </div>
     <div class="panel">
      <div class="panel-heading" role="tab" id="headingTwo">
       <h4 class="panel-title"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> 喜欢你 </a> </h4>
      </div>
      <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
       <div class="panel-body">
        <div class="thumbnail earth">
         <img src="../images/beyond/beyond3.jpg" />
         <div class="caption">
          <h3>喜欢你</h3>
          <button class="btn btn-primary play"><span style="display: none;">../images/beyond/beyond3(1).png</span><span>演奏</span><span style="display: none;">../images/beyond/beyond3(2).png</span></button>
          <button class="btn btn-primary playmore" id="playmore2">更多</button>
         </div>
        </div>
       </div>
      </div>
     </div>
     <div class="panel">
      <div class="panel-heading" role="tab" id="headingThree">
       <h4 class="panel-title"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> 光辉岁月 </a> </h4>
      </div>
      <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
       <div class="panel-body">
        <div class="thumbnail earth">
         <img src="../images/beyond/beyond2.jpg" />
         <div class="caption">
          <h3>光辉岁月</h3>
          <button class="btn btn-primary play"><span style="display: none;">../images/beyond/beyond2(1).png</span><span>演奏</span><span style="display: none;">../images/beyond/beyond2(2).png</span></button>
          <button class="btn btn-primary playmore" id="playmore3">更多</button>
         </div>
        </div>
       </div>
      </div>
     </div>
<!--      <div class="panel">
      <div class="panel-heading" role="tab" id="headingFour">
       <h4 class="panel-title"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour"> 海阔天空 </a> </h4>
      </div>
      <div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
       <div class="panel-body">
        <div class="thumbnail earth">
         <img src="../images/beyond/beyond5.jpg" />
         <div class="caption">
          <h3>海阔天空</h3>
          <button class="btn btn-primary play"><span style="display: none;">../images/beyond/beyond5(1).png</span><span>演奏</span><span style="display: none;">../images/beyond/beyond5(2).png</span></button>
          <button class="btn btn-primary playmore" id="playmore4">更多</button>
         </div>
        </div>
       </div>
      </div>
     </div> -->
    </div>
   </div>

   <!-- 更多 -->
   <div class="moremusic">
      <span class="glyphicon glyphicon-remove closemore" style="color: white;font-size: 50px;position: absolute;top: 2%;right: 1%;cursor: pointer;"></span>
      <span class="moreHeader">曲谱列表</span>
     <div class="form-group">
        <input type="text" class="form-control dropdown-toggle" type="button" data-toggle="dropdown" id="exampleInputEmail2" placeholder="歌手姓名">
            <ul class="dropdown-menu">
               <li class="moresinger" rsn="1">Beyond</li>
               <li class="moresinger" rsn="4">陈奕迅</li>
               <li class="moresinger" rsn="6">邓紫棋</li>
               <li class="moresinger" rsn="2">李健</li>
               <li class="moresinger" rsn="7">李宗盛</li>
               <li class="moresinger" rsn="5">那英</li>
               <li class="moresinger" rsn="10">齐秦</li>
               <li class="moresinger" rsn="11">童安格</li>
               <li class="moresinger" rsn="8">WESTLIFE</li>
               <li class="moresinger" rsn="9">许巍</li>
               <li class="moresinger" rsn="0">张宇</li>
               <li class="moresinger" rsn="3">张雨生</li>
           </ul>
        <button class="btn btn-primary search">搜索</button>
        <img class="nofill" src="../images/404.png">
      </div>
      <div class="moreTable">
        <table class="morelist"></table>
      </div>
      <img class="onload" src="../images/onload.gif">
   </div>
   <!-- 钢琴 -->
   <div class="row" style="margin-top: 1%;">
    <div class="piano col-xs-12">
     <!-- 音量 -->
     <div class="sound">
        <input class="soundnum" type="range" min="0" max="100">
     </div>
     <div class="pianokeyTop">
      <img id="key1" class="pianoKeys piano4" src="../images/piano1.png" />
      <img id="key2" class="pianoKeys piano5" style="position: relative; z-index: 1;" src="../images/piano11.png" />
      <img id="key3" class="pianoKeys piano6" src="../images/piano2.png" />
      <img id="key4" class="pianoKeys piano7" style="position: relative; z-index: 1;" src="../images/piano11.png" />
      <img id="key5" class="pianoKeys piano8" src="../images/piano3.png" />
      <img id="key6" class="pianoKeys piano9" src="../images/piano1.png" />
      <img id="key7" class="pianoKeys piano10" style="position: relative; z-index: 1;" src="../images/piano11.png" />
      <img id="key8" class="pianoKeys piano11" src="../images/piano2.png" />
      <img id="key9" class="pianoKeys piano12" style="position: relative; z-index: 1;" src="../images/piano11.png" />
      <img id="key10" class="pianoKeys piano13" src="../images/piano2.png" />
      <img id="key11" class="pianoKeys piano14" style="position: relative; z-index: 1;" src="../images/piano11.png" />
      <img id="key12" class="pianoKeys piano15" src="../images/piano3.png" />
      <img id="key13" class="pianoKeys piano4" src="../images/piano1.png" />
      <img id="key14" class="pianoKeys piano5" style="position: relative; z-index: 1;" src="../images/piano11.png" />
      <img id="key15" class="pianoKeys piano6" src="../images/piano2.png" />
      <img id="key16" class="pianoKeys piano7" style="position: relative; z-index: 1;" src="../images/piano11.png" />
      <img id="key17" class="pianoKeys piano8" src="../images/piano3.png" />
      <img id="key18" class="pianoKeys piano9" src="../images/piano1.png" />
      <img id="key19" class="pianoKeys piano10" style="position: relative; z-index: 1;" src="../images/piano11.png" />
      <img id="key20" class="pianoKeys piano11" src="../images/piano2.png" />
      <img id="key21" class="pianoKeys piano12" style="position: relative; z-index: 1;" src="../images/piano11.png" />
      <img id="key22" class="pianoKeys piano13" src="../images/piano2.png" />
      <img id="key23" class="pianoKeys piano14" style="position: relative; z-index: 1;" src="../images/piano11.png" />
      <img id="key24" class="pianoKeys piano15" src="../images/piano3.png" />
      <img id="key25" class="pianoKeys piano4" src="../images/piano1.png" />
      <img id="key26" class="pianoKeys piano5" style="position: relative; z-index: 1;" src="../images/piano11.png" />
      <img id="key27" class="pianoKeys piano6" src="../images/piano2.png" />
      <img id="key28" class="pianoKeys piano7" style="position: relative; z-index: 1;" src="../images/piano11.png" />
      <img id="key29" class="pianoKeys piano8" src="../images/piano3.png" />
      <img id="key30" class="pianoKeys piano9" src="../images/piano1.png" />
      <img id="key31" class="pianoKeys piano10" style="position: relative; z-index: 1;" src="../images/piano11.png" />
      <img id="key32" class="pianoKeys piano11" src="../images/piano2.png" />
      <img id="key33" class="pianoKeys piano12" style="position: relative; z-index: 1;" src="../images/piano11.png" />
      <img id="key34" class="pianoKeys piano13" src="../images/piano2.png" />
      <img id="key35" class="pianoKeys piano14" style="position: relative; z-index: 1;" src="../images/piano11.png" />
      <img id="key36" class="pianoKeys piano15" src="../images/piano3.png" />
     </div>
     <button class="introduce">说明</button>
    </div>
   </div>
  </div>
  <img id="introduce" src="../images/introduce.png">
  <span id="introduces" class="glyphicon glyphicon-remove"></span>
 </body>
</html>
